<template>
  <div ref="editor" class="editor" :style="styles">
    <!-- 图片上传组件辅助-->
    <!-- <el-upload
      v-show="false"
      class="avatar-uploader"
      :data="fileUpload"
      name="image"
      :action="uploadUrl"
      :show-file-list="false"
      accept="image/jpeg,image/png,image/jpg"
      :on-success="onUploadHandler"
    ></el-upload> -->
  </div>
</template>

<script>
  import Quill from 'quill'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  //编辑图片
  // Quill.register('modules/imageResize', ImageResize)
  // import ImageResize from 'quill-image-resize-module'

  export default {
    name: 'Editor',
    props: {
      /* 编辑器的内容 */
      value: {
        type: String,
        default: '',
      },
      /* 高度 */
      height: {
        type: Number,
        default: null,
      },
      /* 最小高度 */
      minHeight: {
        type: Number,
        default: null,
      },
    },
    data() {
      return {
        uploadUrl:
          'http://192.168.137.1:9090/alumni-circle/api/photo/uploadImg',
        Quill: null,
        currentValue: '',
        options: {
          theme: 'snow',
          bounds: document.body,
          debug: 'warn',
          modules: {
            // 工具栏配置
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
              [{ indent: '-1' }, { indent: '+1' }], // 缩进
              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ align: [] }], // 对齐方式
              [
                {
                  font: [
                    false,
                    'SimSun',
                    'SimHei',
                    'Microsoft-YaHei',
                    'KaiTi',
                    'FangSong',
                    'Arial',
                  ],
                },
              ], // 字体种类
              ['clean'], // 清除文本格式
              ['link', 'image', 'video'], // 链接、图片、视频
            ],
            // handlers: {
            //   image: function (value) {
            //     if (value) {
            //       debugger
            //       // value === true
            //       document.querySelector('.avatar-uploader').click()
            //     } else {
            //       this.quill.format('image', false)
            //     }
            //   },
            // },
            // // 调整图片大小
            // imageResize: {
            //   displayStyles: {
            //     backgroundColor: 'black',
            //     border: 'none',
            //     color: 'white',
            //   },
            //   modules: ['Resize', 'DisplaySize', 'Toolbar'],
            // },
          },
          placeholder: '请输入内容',
          readOnly: false, //只读模式 true
        },
      }
    },
    computed: {
      styles() {
        const style = {}
        if (this.minHeight) {
          style.minHeight = `${this.minHeight}px`
        }
        if (this.height) {
          style.height = `${this.height}px`
        }
        return style
      },
    },
    watch: {
      value: {
        handler(val) {
          if (val !== this.currentValue) {
            this.currentValue = val === null ? '' : val
            if (this.Quill) {
              this.Quill.pasteHTML(this.currentValue)
            }
          }
        },
        immediate: true,
      },
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
      this.Quill = null
    },
    methods: {
      init() {
        const editor = this.$refs.editor
        this.Quill = new Quill(editor, this.options)
        this.Quill.pasteHTML(this.currentValue)
        this.Quill.on('text-change', (delta, oldDelta, source) => {
          const html = this.$refs.editor.children[0].innerHTML
          const text = this.Quill.getText()
          const quill = this.Quill
          this.currentValue = html
          this.$emit('input', html)
          this.$emit('on-change', { html, text, quill })
        })
        this.Quill.on('text-change', (delta, oldDelta, source) => {
          this.$emit('on-text-change', delta, oldDelta, source)
        })
        this.Quill.on('selection-change', (range, oldRange, source) => {
          this.$emit('on-selection-change', range, oldRange, source)
        })
        this.Quill.on('editor-change', (eventName, ...args) => {
          this.$emit('on-editor-change', eventName, ...args)
        })
      },
      // // 失去焦点事件
      // onEditorBlur(quill) {
      //   console.log('editor blur!', quill)
      // },
      // // 获得焦点事件
      // onEditorFocus(quill) {
      //   console.log('editor focus!', quill)
      // },
      // // 准备富文本编辑器
      // onEditorReady(quill) {
      //   console.log('editor ready!', quill)
      // },
      // // 内容改变事件
      // onEditorChange({ quill, html, text }) {
      //   console.log('editor change!', quill, html, text)
      //   this.content = html
      // },
      // async onUploadHandler(res) {
      //   const imageUrl = res.data

      //   // 获取光标所在位置
      //   let quill = this.$refs.myQuillEditor.quill
      //   let length = quill.getSelection().index
      //   // 插入图片
      //   quill.insertEmbed(length, 'image', imageUrl)
      //   // 调整光标到最后
      //   quill.setSelection(length + 1)
      //   // this.content += url
      // },
    },
  }
</script>

<style>
  .editor,
  .ql-toolbar {
    white-space: pre-wrap !important;
    line-height: normal !important;
  }
  .quill-img {
    display: none;
  }
  .ql-snow .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0;
    content: '保存';
    padding-right: 0;
  }

  .ql-snow .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体' !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体' !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体' !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimSun']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimSun']::before {
    content: '宋体' !important;
    font-family: 'SimSun';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='SimHei']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='SimHei']::before {
    content: '黑体' !important;
    font-family: 'SimHei';
  }

  .ql-snow
    .ql-picker.ql-font
    .ql-picker-label[data-value='Microsoft-YaHei']::before,
  .ql-snow
    .ql-picker.ql-font
    .ql-picker-item[data-value='Microsoft-YaHei']::before {
    content: '微软雅黑' !important;
    font-family: 'Microsoft YaHei';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='KaiTi']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='KaiTi']::before {
    content: '楷体' !important;
    font-family: 'KaiTi';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='FangSong']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='FangSong']::before {
    content: '仿宋' !important;
    font-family: 'FangSong';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='Arial']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='Arial']::before {
    content: 'Arial' !important;
    font-family: 'Arial';
  }

  .ql-snow
    .ql-picker.ql-font
    .ql-picker-label[data-value='Times-New-Roman']::before,
  .ql-snow
    .ql-picker.ql-font
    .ql-picker-item[data-value='Times-New-Roman']::before {
    content: 'Times New Roman' !important;
    font-family: 'Times New Roman';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='sans-serif']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='sans-serif']::before {
    content: 'sans-serif' !important;
    font-family: 'sans-serif';
  }
</style>
